<template>
  <div>
    <table>
      <tr v-for="obj, index in arr" :key="index">
        <td>{{ obj.name }}</td>
        <td>
          <slot :row="obj">{{ obj.img }}</slot>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
// 父 -> 子
// 口诀:
// 1. 子组件里设置props变量名和接收使用
// 2. 父组件里给此组件标签传入值
// 插槽基本使用-口诀
// 1. 子组件里用slot占位
// 2. 父组件里给组件标签夹着的地方传入具体标签替换slot的位置
// 作用域插槽口诀
// 1. 子组件里给slot身上绑定自定义属性和值
// 2. 父组件里用template/其他标签, 配合v-slot="变量名"收集对应slot身上的属性名和值形成数据对象
export default {
  props: {
    arr: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style>

</style>
